<template>
  <div>
    <div style="border: 1px solid #ccc;">
		<Toolbar
			:editor="editorRef"
			:defaultConfig="toolbarConfig"
			:mode="mode"
			style="border-bottom: 1px solid #ccc"
		/>
		<Editor
		  :defaultConfig="editorConfig"
		  :mode="mode"
		  v-model="valueHtml"
          style="height: 350px; overflow-y: hidden;"
		  @onCreated="handleCreated"
		  @onDestroyed="handleDestroyed"
		/>
	</div>
  <div>
    <el-button type="success" @click="toSave">全部保存</el-button>
  </div>
  </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref,shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import mitt from '../../../utils/mitt'
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
 
let mode = "defualt";
 
// 内容 HTML 收集富文本编辑器双向绑定的值
const valueHtml = ref('');
// 接收富文本的回显
mitt.on('sendHtml',(html)=>{
  valueHtml.value=html;
})
 
// 编辑器配置
const toolbarConfig = {};
const editorConfig = { 
    placeholder: '请输入内容...',
    MENU_CONF: {
            uploadImage: {
                fieldName: 'file',
                server: `${import.meta.env.VITE_BASE_URL}/commons/upload`         
                // 注意 ${import.meta.env.VITE_BASE_URL} 写你自己的后端服务地址
            }
        }
};
 
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})
 
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

// 传递富文本的数据给兄弟组件并调用 整体保存接口
let toSave=()=>{
    mitt.emit('sendEditor',valueHtml.value)
} 


</script>
